<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        /* 选择标签中带有v-cloak的元素，进行隐藏 */
        /* 当Vue加载好之后会自动移除v-cloak属性 */
        [v-cloak] {
            display: none;
        }

        .current{
            width: 200px;
            height: 200px;
            border: 1px solid darkgray;
        }
        .error{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-cloak>{{content}}</div>
        <!-- 满足条件才加current -->
        <div :class="{current:isCurrent,error:isError}">123</div>
        <!-- 数组的形式 -->
        <div :class="['current','error']">345</div>
        <!-- 混用 -->
        <div :class="[{current:isCurrent},'error']">567</div>
        <!-- 自定义指令使用 -->
        <div>
            <input type="text" v-focus value="自动聚焦" v-color= "{color:'red'}">
        </div>
    </div>

    <script>
        // 原声方式操作DOM
        // var app = document.querySelector('#app');
        // app.innerHTML= " 我是动态设置的";


        // JQ方式操作----需要先引入JQ的CDN
        // $('#app').innerHtml('我是动态的');


        // Vue的方式操作--给人感觉不需要直接操作DOM，Vue帮我们操作
        // Vue要new一个Vue才行 



        // 全局自定义指令
        Vue.directive('focus',{
            // 不同的钩子函数 inserted、bind、update
            // 当元素被插入到DOM树上的时候，自动聚焦
            inserted: function(el){
                //聚焦元素
                el.focus()
            },
            // 只调用一次，指令第一次绑定到元素的时候调用，在这里可以做一些初始化设置
            bind:function(){

            },
            // 所在组件的VNode进行更新的时候调用。
            update(){

            },
            // 所在组件VNode及所有子VNode全部更新之后调用
            componentUpdated:function(){

            },
            // 只调用一次，解绑的时候调用
            unbind:function(){

            }
        });

        Vue.directive('color',{
            bind:function(el,binding){
                console.log('binding---',binding);
                el.style.background = binding.value.color
            }
        })
        const vm = new Vue({
            el:'#app',//CSS 选择器，选择Dom元素
            // 这里的对象可以是对象，也可以是函数，但是在组件中，这里必须是函数
            data:{
                // data上的元素直接挂在了vm上了，数据改变，视图直接更新
                content:'from Vue data',
                isCurrent:true,
                isError:true,
            },
            // 局部自定义指令
            directives:{
                // 全局和局部以局部为准
                // 这种驼峰式的命名，使用的时候要用‘-’例如：v-focus-A
                focusA:{
                    // 生命周期
                    inserted:function(e){
                        e.focus();
                    }
                }
            }
        })
    </script>
</body>
</html>